<template>
	<view>
		<view class="header-area">
			<commonTab :nowCurrent="0"></commonTab>
			<!-- 轮播图 -->
			<swipers :pid="13" height="248rpx" padding="30rpx"></swipers>
		</view>
		<view class="main-content-area">
			<view class="information-lists-area u-padding-left-30 u-padding-right-30">
				<view v-for="(v,k) in associationLists" :key="k"
					@click="goPage('/yixu/pages/network_square/association_info?id=' + v.id)"
					class="row u-border-radius-10 u-padding-bottom-20 mb20 association-item bg-white u-padding-20">
					<u-avatar :src="v.image" :size="120" mode="square" style="border-radius: 15rpx;overflow: hidden;"></u-avatar>
					<view class="u-padding-left-20 row flex1" style="width: calc(100% - 200rpx);">
						<view class="u-flex-1 information-area">
							<view class="line1 md u-font-weight-500">{{v.name||''}}</view>
							<view class="line1 xs  mt10 remark u-color-666666">{{v.remark||''}}</view>
							<view class="row mt10 muted">
								<view class="row mr10 u-padding-right-15">
									<u-icon name="https://dtm.lanbaozixun.com/static/mobile/association/number_people.svg" :size="26" class="mr5"></u-icon>
									<text class="xxs">{{v.people_number||0}}</text>
								</view>
								<view class="row ml10 u-padding-left-15" v-if="v.last_join_time">
									<u-icon name="https://dtm.lanbaozixun.com/static/mobile/association/join_time.svg" :size="22" class="mr5"></u-icon>
									<text class="xxs">{{v.last_join_time||''}}</text>
								</view>
							</view>
						</view>
						<u-icon name="arrow-right" color="#C8C9CC" :size="30"></u-icon>
					</view>
				</view>
				<common-tabbar></common-tabbar>
				<xy-loading v-if="loadingShowStatus"></xy-loading>
				<u-empty v-if="associationLists.length <= 0" text="暂无内容" mode="search"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		toLogin
	} from '@/utils/login'
	import {
		getBuyRecord,
		getGoodsLists
	} from '@/api/store'
	import {
		loadingType
	} from "@/utils/type";
	import {
		loadingFun
	} from "@/utils/tools"
	import Cache from "@/utils/cache";
	import wechath5 from '@/utils/wechath5'
	import commonTab from '@/yixu/pages/network_square/components/common_tab.vue'
	export default {
		components:{commonTab},
		data() {
			return {
				page: 1,
				associationLists:[],
				loadingShowStatus: true,
				loadingStatus: loadingType.LOADING,
			};
		},
		async onLoad(options) {
			this.getAssociationData()
			uni.$once('h5ShareSetFinished',function(w,o){
				o.shareTitle = '社群中心';
				o.shareDesc = '社群中心';
				w.share(o)
			})
		},
		onShareTimeline() {
			const shareInfo = Cache.get('shareInfo')
			return {
				title: '社群中心',
				path: "pages/association/lists?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		onShareAppMessage() {
			const shareInfo = Cache.get('shareInfo')
			return {
				title: '社群中心',
				path: "pages/index/index?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		onReachBottom: function() {
			this.getAssociationData();
		},
		methods: {
			async getBuyRecordFun() {
				let {
					data
				} = await getBuyRecord();
				this.list = data;
			},
			tabsChange(index) {
				this.tabsCurrent = index;
				this.page = 1;
				this.associationLists = [];
				this.loadingStatus = loadingType.LOADING;
				this.getAssociationData()
			},
			getAssociationData() {
				let {
					associationLists,
					loadingStatus,
					tabsCurrent,
					tabsLists,
					page
				} = this;
				loadingFun(getGoodsLists, page, associationLists, loadingStatus).then(res => {
					if (res) {
						this.page = res.page;
						this.loadingShowStatus = false
						this.associationLists = res.dataList
						this.loadingStatus = res.status
					}
				})
			},
			goPage(url) {
				if (!this.isLogin) return toLogin();
				uni.navigateTo({
					url,
					fail(e) {
						console.log(e)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;

		.header-area {
			// background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(224, 242, 255, 1) 23.69%, rgba(156, 215, 255, 1) 72.53%, rgba(120, 201, 255, 1) 100%);

			.classify-area {
				padding: 0 35rpx;
				width: calc(100vw - 70rpx);
				background: rgba(224, 242, 255, 1);


				.classify-item {
					flex-shrink: 0;
					padding: 8rpx 24rpx;
					display: inline-block;
					border-radius: 12rpx;
					margin-right: 16rpx;
					background: rgba(26, 26, 26, 0.06);
				}

				.classify-select {
					color: #0099FF;
					background: rgba(82, 185, 254, 0.12) !important;
				}
			}
		}

		.main-content-area {
			overflow: hidden;
			border-radius: 10rpx 10rpx 0 0;
			
			.association-item{
				background: #F2F2F2;
				
				.information-area{
					width: 80%;
				}
			}
		}
		.lable-area{
			.lable-item{
				padding-right: 16rpx;
				position: relative;
				
				&::after{
					top: 0;
					right: 8rpx;
					bottom: 0;
					width: 2rpx;
					content: ' ';
					position: absolute;
					background: #0099FF;
				}
				
				&:last-child{
					padding-right: 0 !important;
					
					&::after{
						display: none;
					}
				}
			}
		}

		.area-bg {
			border-radius: 10rpx;
			background: #F7F7F7;
		}
	}
</style>